<template>
  <div class="main-content">
    <!-- 筛选区 -->
    <div class="filter-container">
      <el-input
          v-model="listQuery.username"
          placeholder="用户名"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
      />
      <el-input
          v-model="listQuery.ipAddress"
          placeholder="IP地址"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
      />
      <el-date-picker
          v-model="listQuery.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          class="filter-item"
          style="width: 350px;"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <!-- 数据表格 -->
    <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column label="用户ID" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.userId }}</template>
      </el-table-column>
      <el-table-column label="IP地址" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.ipAddress }}</template>
      </el-table-column>
      <el-table-column label="登录时间" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.loginTime }}</template>
      </el-table-column>
      <el-table-column label="登出时间" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.logoutTime || '--' }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="{ row }">
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
    />
  </div>
</template>

<script>
import AddOrUpdate from "./add-or-update";

export default {
  name: 'LogList',
  data() {
    return {
      listQuery: {
        username: '',
        ipAddress: '',
        dateRange: [],
        page: 1,
        limit: 10,
      },
      list: [],
      total: 0,
      listLoading: false,
    };
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1; // 重置为第一页
      this.getList(); // 获取过滤后的数据
    },

    getList() {
      this.listLoading = true;
      const params = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        username: this.listQuery.username,
        ipAddress: this.listQuery.ipAddress,
        startDate: this.listQuery.dateRange[0],
        endDate: this.listQuery.dateRange[1],
      };

      this.$http({
        url: "log/page",
        method: "get",
        params: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.list = data.data.list;
          this.total = data.data.total;
        } else {
          this.list = [];
          this.total = 0;
        }
        this.listLoading = false;
      });
    },

    handleDelete(row) {
      this.$confirm(`确定要删除 ID 为 ${row.id} 的日志吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "log/delete",
          method: "post",
          data: [row.id],
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
              onClose: this.getList,
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
  },

  created() {
    this.getList(); // 初始化时获取数据
  },
};
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-item {
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>
